import React, { JSX } from 'react';
import { NulCommonOperations, NulDialog, NulFormItem } from '../../components/NulDialog';
import { MenuItem, Select, TextField } from '@mui/material';
import { useAppDispatch } from '../../actions/hooks';
import { createNewUser } from '../../actions/UserManagement';
import { defaultAuthority } from '../../util/TextTransform';

interface CreateUserDialogProps {
  open: boolean;
  onClose: () => void;
};

function CreateUserDialog(props: CreateUserDialogProps): JSX.Element {
  const { open, onClose } = props;

  const dispatch = useAppDispatch();

  const [name, setName] = React.useState<string>('');
  const [password, setPassword] = React.useState<string>('');
  const [repeatPassword, setRepeatPassword] = React.useState<string>('');
  const [authority, setAuthority] = React.useState<string>(defaultAuthority);

  const [nameError, setNameError] = React.useState<boolean>(false);
  const [passwordError, setPasswordError] = React.useState<boolean>(false);

  const clear = () => {
    setName('');
    setPassword('');
    setRepeatPassword('');
    setAuthority(defaultAuthority);
  };

  const onConfirm = () => {
    let confirm: boolean = true;
    setPasswordError(false);
    setNameError(false);
    if (password !== repeatPassword) {
      setPasswordError(true);
      confirm = false;
    }
    if (name === '') {
      setNameError(true);
      confirm = false;
    }

    if (confirm) {
      dispatch(createNewUser({ userName: name, password: password, authority: authority }));
      onClose();
      clear();
    }
  };

  return (
    <NulDialog
      open={open}
      title='Create User'
      onClose={onClose}
      operations={
        <NulCommonOperations
          onPositiveClicked={onConfirm}
          onNegativeClicked={onClose}
        />
      }
    >
      <NulFormItem hint='Name' component={
        <TextField
          placeholder='User Name' fullWidth size='small'
          value={name} error={nameError}
          onChange={(event) => { setName(event.target.value); }}
        />
      } />
      <NulFormItem hint='Authority' component={
        <Select
          value={authority}
          onChange={(event) => { setAuthority(event.target.value); }}
          fullWidth size='small'
          defaultValue={defaultAuthority}
        >
          <MenuItem value='admin'>Administrator</MenuItem>
          <MenuItem value='user'>User</MenuItem>
        </Select>
      } />
      <NulFormItem hint='Password' component={
        <TextField
          placeholder='Password' fullWidth size='small'
          value={password} type='password'
          onChange={(event) => { setPassword(event.target.value); }}
        />
      } />
      <NulFormItem hint='Repeat' component={
        <TextField
          placeholder='Repeat Password' fullWidth size='small'
          value={repeatPassword} type='password'
          error={passwordError} helperText={passwordError && 'Unmatched passwords.'}
          FormHelperTextProps={{
            sx: {
              marginLeft: '5px',
              marginTop: '2px',
              fontFamily: 'Open Sans'
            }
          }}
          onChange={(event) => { setRepeatPassword(event.target.value); }}
        />
      } />
    </NulDialog>
  );
}

export { CreateUserDialog };